<template>
  <div class="tags-wrapper">
    <div class="tags">
      <v-tag
        v-for="(item, index) in tags"
        :tagName="item"
        :key='index'
        :index="index"
        @changeValue="changeTag"
        @deleteTag="deleteTag"
      ></v-tag>
    </div>
    <v-loading v-show="loading"></v-loading>
  </div>
</template>

<script>
import Tag from './Tag/Tag'
import Loading from 'components/common/Loading/Loading'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      loading: true
    }
  },
  computed: {
    ...mapState({
      allArticles: state => state.article.allArticles,
      allTags: state => state.article.allTags
    }),
    tags() {
      return this.allTags.map(o => o.name)
    }
  },
  created() {
    this.$store
      .dispatch('getAllTags')
      .then(res => {
        this.loading = false
      })
      .catch(err => {
        this.$message({
          type: 'error',
          message: '获取所有标签失败!'
        })
      })
  },
  mounted() {},
  methods: {
    //改变标签内容
    changeTag({ val, index }) {
      let id = this.allTags[index]._id
      this.$store
        .dispatch('modifyTag', { val, id })
        .then(res => {
          this.$message({
            type: 'error',
            message: '修改标签成功!'
          })
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: '修改标签失败!'
          })
        })
    },
    deleteTag(index) {
      let id = this.allTags[index]._id
      this.$store
        .dispatch('deleteTag', id)
        .then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '该标签删除成功！'
            })
          }
        })
        .catch(err => {
          console.log('删除标签失败！')
          this.$message({
            type: 'error',
            message: '删除失败！'
          })
        })
    }
  },
  components: {
    'v-tag': Tag,
    'v-loading': Loading
  }
}
</script>


<style lang="stylus" scoped>
@import '../../../assets/stylus/_setting'
.tags-wrapper
  width calc(100% + 20px)
  height 100%
  overflow-x hidden
  overflow-y auto
  .tags
    box-sizing border-box
    width calc(100% - 20px)
    padding 10px
</style>